<!-- 查看维保单 -->
<template>
  <div class="content">
    <div class="message">
      <h4 class="titie" style="margin: 10px">维保信息:</h4>
      <van-form>
        <van-field v-model="messageForm.a" name="日期" label="日期" />
        <van-field v-model="messageForm.b" name="维保编号" label="维保编号" />
        <van-field v-model="messageForm.c" name="项目名称" label="项目名称" />
        <van-field v-model="messageForm.c" name="维保人" label="维保人" />
      </van-form>
    </div>
    <van-divider />
    <div class="detail">
      <h4 class="title" style="margin: 10px">维保明细:</h4>
      <van-checkbox-group v-model="result" class="checkBox-group">
        <van-checkbox name="a" class="item">
          <div class="detail-item">
            <div>设备一</div>
            <div style="font-size:12px">
              维保名称 &nbsp;&nbsp; 设备编号
            </div>
          </div>
        </van-checkbox>
        <van-checkbox name="b" class="detail-item">
          <div class="detail-item">
            <div>设备二</div>
            <div style="font-size:12px">
              维保名称 &nbsp;&nbsp; 设备编号
            </div>
          </div>
        </van-checkbox>
        <van-checkbox name="c" class="detail-item">
          <div class="detail-item">
            <div>设备三</div>
            <div style="font-size:12px">
              维保名称 &nbsp;&nbsp; 设备编号
            </div>
          </div>
        </van-checkbox>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
import { Form, Field, Divider, Checkbox, CheckboxGroup } from 'vant'
export default {
  data () {
    return {
      messageForm: {},
      result: []
    }
  },

  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Divider.name]: Divider,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup
  },

  computed: {},

  methods: {}
}
</script>
<style lang='less' scoped>
  .message,.detail, .content  {
    background: #fff;
  }
  .content {
    height: 100%;
  }
  .checkBox-group {
    padding: 10px;
    .detail-item {
      margin-bottom: 5px;
    }
  }
</style>
